<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>设置-个人信息</title>
     <link rel="icon" href="/assets/img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-seckillOrder.css" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
   
   <!--页面顶部白条条，由js动态加载-->
	<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
	<div class="nav-bottom"></div>
    <script type="text/javascript">$(".nav-bottom").load("top.html");</script>

<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>

<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
<script type="text/javascript" src="plugins/jquery.validate/jquery.validate.js"></script>

</body>
    <!--header-->
    <div id="account">
        <div class="py-container">
            <div class="yui3-g home">
                <!--左侧列表-->
                <div class="yui3-u-1-6 list">

                    <div class="person-info">
                        <div class="person-photo"><img src="img/_/photo.png" alt=""></div>
                        <div class="person-account">
                            <span class="name">Michelle</span>
                            <span class="safe">账户安全</span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="list-items">
                        <dl>
							<dt><i>·</i> 订单中心</dt>
							<dd><a href="home.html?status=0" >我的订单</a></dd>
							<dd><a href="home.html?status=1" >待付款</a></dd>
							<dd><a href="home.html?status=2" >待发货</a></dd>
							<dd><a href="home.html?status=3" >待收货</a></dd>
							<dd><a href="home.html?status=4" >待评价</a></dd>
						</dl>
						<dl>
							<dt><i>·</i> 我的中心</dt>
							<dd><a href="home-person-collect.html" >我的收藏</a></dd>
							<dd><a href="home-person-footmark.html" >我的足迹</a></dd>
						</dl>
						<dl>
							<dt><i>·</i> 物流消息</dt>
						</dl>
						<dl>
							<dt><i>·</i> 设置</dt>
							<dd><a href="home-setting-info.html" >个人信息</a></dd>
							<dd><a href="home-setting-address.html" >地址管理</a></dd>
							<dd><a href="home-setting-safe.html" class="list-active" >安全管理</a></dd>
						</dl>
                    </div>
                </div>
                <!--右侧主内容-->
                <div class="yui3-u-5-6">
                    <div class="body userSafe">
                        <ul class="sui-nav nav-tabs nav-large nav-primary ">
                            <li class="active"><a href="#one" data-toggle="tab">密码设置</a></li>
                            
                        </ul>
                        <div class="tab-content ">
                            <div id="one" class="tab-pane active">
                                <form class="sui-form form-horizontal sui-validate" id="jsForm">
                                
                                    <div class="control-group">
                                        <label for="inputPassword" class="control-label">原密码：</label>
                                        <div class="controls">
                                            <input class="fn-tinput" @blur="checkPassword()" type="password" :value="oldpassword" @input="oldpassword = $event.target.value" placeholder="原密码" >
                                        </div>
                                        <h4 style="color: brown;">{{error1}}</h4>
                                    </div>
                                    <div class="control-group">
                                        <label for="inputPassword" class="control-label">新密码：</label>
                                        <div class="controls">
                                            <input class="fn-tinput" type="password" :value="password" @input="password = $event.target.value" placeholder="新密码">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="inputRepassword" class="control-label">重复密码：</label>
                                        <div class="controls">
                                            <input class="fn-tinput" @blur="checkNewPassword()" type="password" :value="confirm_password" @input="confirm_password = $event.target.value" placeholder="确认新密码" >
                                        </div>
                                        <h4 style="color: brown;">{{error2}}</h4>
                                    </div>

                                    <div class="control-group">
                                        <label class="control-label"></label>
                                        <div class="controls">
                                            <div class=" btn-primary" @click="updatePassword">提交按钮</div>
                                            <h4>{{error3}}</h4>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

	<!-- 底部栏位 -->
	<!--页面底部，由js动态加载-->
	<div class="clearfix footer"></div>
	<script type="text/javascript">$(".footer").load("foot.html");</script>
    <!--页面底部END-->
    
    <script src="./js/vue/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/plugins/jquery/jquery.cookie.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#account",
            data: {
                ly,
                oldpassword : "",
                password : "",
                confirm_password : "",
                error1 : "",
                error2 : "",
                error3 : "",
            },
            created() {
                
            },
            methods: {
                logout() {
                    // 删除cookie中的token即可
                    Cookies.remove("LY_TOKEN",{
                        path:"/",
                        domain:"leyou.com"
                    });
                    window.location = 'http://www.leyou.com'
                },
                gotoLogin() {
                    window.location = "login.html?returnUrl=" + window.location;
                },
                checkPassword(){
                    if(this.oldpassword != ""){
                        ly.http.post("/auth/check/password",ly.stringify({password:this.oldpassword}))
                        .then(() => {
                            this.error1 = "原密码正确"
                        }).catch(() => {
                            this.error1 = "原密码错误"
                        })
                        
                    }else{
                        this.error1 = ""
                    }
                    
                },
                checkNewPassword(){
                    if(this.password != this.confirm_password){
                        this.error2 = "密码不一致"
                    }else{
                        this.error2 = ""
                    }
                },
                updatePassword(){
                    ly.http.put("/auth/user/password",ly.stringify({password:this.confirm_password}))
                    .then(() => {
                        this.$message({
                            showClose: true,
                            message: '密码修改成功',
                            type: 'success'
                        });
                        this.oldpassword = "",
                        this.password = "",
                        this.confirm_password = "",
                        this.error1 = ""
                    }).catch(() => {
                        this.$message({
                            showClose: true,
                            message: '密码修改失败,请重试',
                            type: 'error'
                        });
                    })
                }
                
            },
            watch:{
                
            }
        });
    </script>

</html>